<template>
	<view class="xilu">
		<view class="container">
			<!-- <div class="top" style="height:400rpx;"></div> -->
			<!-- <view class="page-heada bg-normal flex-box flex-center">

				<view class="xilu_head_search flex-box">
					<view class="xilu_search_sq"></view>
					<input type="text" class="flex-grow-1 fs26 colf pr10" placeholder="请输入" placeholder-class="col9"
						confirm-type="search" @confirm="input_keyword($event)">
					<image src="@/static/images/xilu_icon_search.png" mode="widthFix" class="ico28"></image>
				</view>

			</view> -->

			<template>

				<view class="xilu_class_nav" style="margin-top: 20rpx">

					<view class="xilu_class_nav_link" :class="cindex==0?'active':''" @click="chooseClassNav(0)"
						v-if="course_type != 3 && course_type != 4">
						<view>分类</view>
						<image src="@/static/images/xilu_arrow_yellow.png" mode="aspectFill" class="arrow"
							v-if="cindex==0">
						</image>
						<image src="@/static/images/xilu_arrow_gray.png" mode="aspectFill" class="arrow" v-else>
						</image>
					</view>

					<view class="xilu_class_nav_link" :class="cindex==1?'active':''" @click="chooseClassNav(1)">
						<view>价格</view>
						<image src="@/static/images/xilu_arrow_yellow.png" mode="aspectFill" class="arrow"
							v-if="cindex==1">
						</image>
						<image src="@/static/images/xilu_arrow_gray.png" mode="aspectFill" class="arrow" v-else>
						</image>
					</view>
					<!-- <view class="xilu_class_nav_link" :class="course_type == 4?'active':''" @click="chooseNav(4)">
						<view>收藏的教练</view>
					</view> -->
				</view>
				<!-- <view class="xilu_date_nav flex-box ml25" v-if="course_type != 4">
					<template v-for="(vo,keys) in classTimeList">
						<view :class="choose_date == vo.day_date ? 'xilu_date_nav_item active' : 'xilu_date_nav_item'"
							@tap="chooseDate(vo.day_date)">
							<view>{{vo.day || ''}}</view>
							<view class="mt5">{{vo.week || ''}}</view>
						</view>
					</template>


				</view> -->

			</template>

			<template v-if="course_type == 1">
				<!-- 团课 -->

				<view class="pb30 plr25">


					<view class="">
						<view class="xilu_total_box">
							<mall-list :list="courseList"></mall-list>
							<!-- <template v-if="courseList.length > 0">
								<mall-list :list="courseList"></mall-list>\
							</template>

							<template v-else>
								<empty-data :tips="'暂无课程'" :lineHeight="100"></empty-data>
							</template> -->


						</view>
					</view>

				</view>

			</template>


		</view>


		<u-popup :show="show" mode="bottom" @close="closePop()">
			<view class="xilu_popup">
				<view class="xilu_popup_head">
					<view class="xilu_popup_tab flex-box flex-center" :class="hindex==0?'active':''"
						@click="chooseHead(0)">
						<view>分类</view>

						<image src="@/static/images/xilu_arrow_yellow.png" mode="aspectFill" class="arrow"
							v-if="hindex==0"></image>

						<image src="@/static/images/xilu_icon_arrowdown_white.png" mode="aspectFill" class="arrow"
							v-else>
						</image>

					</view>


					<view class="xilu_popup_tab flex-box flex-center" :class="hindex==1?'active':''"
						@click="chooseHead(1)">
						<view>价格</view>
						<image src="@/static/images/xilu_arrow_yellow.png" mode="aspectFill" class="arrow"
							v-if="hindex==1"></image>
						<image src="@/static/images/xilu_icon_arrowdown_white.png" mode="aspectFill" class="arrow"
							v-else>
						</image>
					</view>
				</view>


				<view class="xilu_popup_scroll flex" v-if="hindex==0">
					<scroll-view class="xilu_time_scroll" scroll-y>
						<view class="xilu_time_scroll_item" :class="courseIndex == '999'?'active':''"
							@tap="chooseLeft(0,999)">全部
						</view>
						<view class="xilu_time_scroll_item" :class="courseIndex == index ?'active':''"
							v-for="(vo,index) in course_cate_list" @click="chooseLeft(vo.id, index)">
							{{vo.title}}
						</view>

					</scroll-view>


				</view>
				<!-- 价格 -->
				<view class="xilu_popup_scroll" v-if="hindex==1">

					<view class="xilu_time_nav flex-box flex-center">
						<view class="xilu_time_link flex-box flex-center">
							<input type="number" v-model="priceInputStart" placeholder="起始区间"
								@input="priceInputStartEvent">
						</view>
						<view class="xilu_sq"></view>
						<view class="xilu_time_link  flex-box flex-center">
							<input type="number" v-model="priceInputEnd" placeholder="结束区间" @input="priceInputEndEvent">
						</view>
					</view>
					<scroll-view scroll-y="true" class="xilu_time_scroll">
						<view class="xilu_time_scroll_item" :class="priceIndex == index? 'active' :''"
							v-for="(vo,index) in choosePriceList" @click="choosePrice(vo.start, vo.end, index)">
							{{ vo.start}} - {{ vo.end }}
						</view>
					</scroll-view>
				</view>
				<view class="p30 flex-box">
					<view @tap="resetData()" class="xilu_btn_reset">重置</view>
					<view @tap="clearData()" class="xilu_btn_sure">确认</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import index from '../../uni_modules/uview-ui';

	const app = getApp();
	export default {
		data() {
			return {
				config: {
					back: false,
					maxSlot: true,
					backgroundColor: [1, '#0F1011'],
					statusBarFontColor: ['#ffffff']
				},
				cindex: -1,
				show: false,
				hindex: 0,
				tindex: 0,
				timeList: [],
				classTimeList: [],
				choose_date: '',
				start_at: '',
				end_at: '',
				course_cate_list: [],
				course_cate_list_two: [],
				course_cate_list_three: [],
				cate_pid: 0,
				cate_id: 0,
				cate_zid: 0,
				province_list: [],
				city_list: [],
				province_id: 0,
				city_id: 0,
				area_id: 0,
				city_name: '',
				bannerList: [],
				course_type: 1,
				list: [],
				page: 1,
				total_count: 0,
				c_index: '',
				choosePriceList: [{
						start: 0,
						end: 50
					},
					{
						start: 50,
						end: 100
					},
					{
						start: 100,
						end: 150
					},
					{
						start: 150,
						end: 200
					},
					{
						start: 200,
						end: 250
					},
					{
						start: 250,
						end: 300
					}
				],

				priceIndex: null,
				priceStart: null,
				priceEnd: null,
				priceInputStart: null,
				priceInputEnd: null,
				coachList: [],
				coachIndex: null,
				courseList: [],
				courseIndex: '999',
				courseId: null
			}
		},
		methods: {


			//选择搜索条件左侧
			chooseLeft(id, index) {
				// 课程一级分类

				this.courseIndex = index
				this.courseId = id


			},


			//获取课程分类
			getCourseCateList() {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/market_brand/index',
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						this.course_cate_list = res.data.list
						console.log(res);
					}
				}).catch(error => {
					console.log('courseCateError', error);
				})
			},




			input_keyword(e) {
				console.log(e);
				this.keywords = e.detail.value;
				this.getLists()
			},
			clearData() {
				this.page = 1;
				this.list = [];
				this.total_count = 0;
				this.show = false;
				this.getLists();

			},
			getLists() {

				let _this = this;
				this.$http({
					url: '/addons/xilufitness/market_wares/index',
					data: {
						pid: this.courseId || 0,
						min_price: this.priceInputStart || this.priceStart || 0,
						max_price: this.priceEnd || this.priceInputEnd || 0,
					},
					method: 'get'
				}).then(res => {
					console.log(res);
					this.courseList = res.data.list
					console.log(this.courseList);
					console.log(res);
				}).catch(error => {
					console.log('coachError', error);
				});
			},
			// 课程时长

			// 价格

			priceInputStartEvent(e) {
				console.log(e);

				this.priceInputStart = e.detail.value
				if (this.priceInputStart && this.priceInputEnd) {
					this.priceIndex = null
					this.priceStart = null
					this.priceEnd = null
				}
			},
			priceInputEndEvent(e) {
				console.log(e);
				this.priceInputEnd = e.detail.value
				if (this.priceInputStart && this.priceInputEnd && this.priceInputEnd > this.priceInputStart) {
					this.priceIndex = null
					this.priceStart = null
					this.priceEnd = null
				}

			},
			choosePrice(start, end, index) {
				this.priceIndex = index
				this.priceStart = start
				this.priceEnd = end
				this.priceInputStart = null
				this.priceInputEnd = null
				console.log(this.priceIndex, this.priceStart, this.priceEnd);
			},





			//选择搜索条件
			chooseClassNav(e) {

				this.getCourseCateList();
				this.cindex = e;
				this.hindex = e;
				this.show = true;
			},

			chooseHead(e) {

				this.getCourseCateList();

				this.hindex = e;
				this.cindex = e;
			},

			//选择时间
			chooseTime(index, times) {
				this.tindex = index,
					this.start_at = times.start_at;
				this.end_at = times.end_at;
			},

			//关闭弹窗
			closePop() {
				this.show = false;
			},
			//选择日期
			chooseDate(day_date) {
				this.choose_date = day_date;
				this.clearData();
			},
			//清楚数据
			// clearData() {
			// 	this.page = 1;
			// 	this.list = [];
			// 	this.total_count = 0;
			// 	this.show = false;
			// 	this.getLists();
			// },
			//重置数据
			resetData() {

				this.priceIndex = null
				this.priceStart = null
				this.priceEnd = null
				this.priceInputStart = null
				this.priceInputEnd = null
				this.courseId = 0
				this.cate_pid = 0;
					this.courseIndex = 999
				this.coachIndex = null
				this.classIndex = null
				this.course_cate_list = []
				this.getCourseCateList()
				this.clearData()
				// this.clearData();
			},

		},
		onLoad(options) {
			this.getCourseCateList()
			this.getLists()

		},
		onShareAppMessage() {

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.hx-navbar__status {
		height: 0 !important
	}

	/deep/.hx-navbar__content {
		height: 110rpx !important;
	}

	/deep/.hx-navbar {
		height: 110rpx !important;
	}

	.xilu {

		&_head_search {
			width: 93%;
			height: 64rpx;
			background: #292B2C;
			border-radius: 32rpx;
			padding-left: 20rpx;
			padding-right: 30rpx;
			margin: 40rpx 0;
		}

		&_search_sq {
			width: 1px;
			height: 24rpx;
			background: #666666;
			margin-left: 20rpx;
			margin-right: 10rpx;
		}

		&_icon_address {
			width: 26rpx;
			height: 28rpx;
		}

		&_icon_down {
			width: 17rpx;
			height: 9rpx;
		}

		&_course_swiper {
			width: 750rpx;
			height: 414rpx;

			.banner {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		&_swiper_bottom {
			position: absolute;
			z-index: 3;
			bottom: 30rpx;
			left: 0;
			right: 0;
		}

		&_tab_nav {
			height: 108rpx;
			line-height: 108rpx;
			padding-left: 32rpx;

			&_link {
				margin-right: 40rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: inline-block;
				vertical-align: top;
			}

			&_link.active {
				font-weight: 500;
				color: #FFCF00;
			}
		}

		&_class_nav {
			margin-bottom: 0rpx;
			padding-left: 25rpx;
			white-space: nowrap;
			overflow-x: auto;

			&_link {
				display: inline-flex;
				align-items: center;
				height: 52rpx;
				background: #fff;
				border-radius: 26rpx;
				padding: 0 30rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				margin-bottom: 10rpx;
			}



			&_link.active {
				border: 1px solid #FFCF00;
				color: #FFCF00;
			}

			&_link+&_link {
				margin-left: 18rpx;
			}
		}

		&_date_nav {
			width: 700rpx;
			height: 145rpx;
			background: #404243;
			border-radius: 20rpx;

			&_item {
				width: 58rpx;
				height: 110rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 42rpx;
				line-height: 40rpx;
				text-align: center;
				padding-top: 13rpx;
			}

			&_item:first-child {
				margin-left: 16rpx;
			}

			&_item.active {
				background: #FFCF00;
				border-radius: 29rpx;
				color: #101010;
				line-height: 40rpx;
			}
		}

		&_total_box {
			border-radius: 20rpx;

			&_item {

				padding: 20rpx 0;
				border-bottom: 1px solid #666666;
			}

			&_item:last-child {
				border-bottom: none;
			}

			&_cover {
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				display: block;
			}
		}

		&_btn {
			width: 118rpx;
			height: 57rpx;
			line-height: 57rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #0E0E0F;
			background: #FFCF00;
			border-radius: 10rpx;
		}

		&_btn1 {
			width: 118rpx;
			height: 57rpx;
			line-height: 57rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #0E0E0F;
			background: #FFCF00;
			border-radius: 10rpx;
		}

		&_btn2 {
			width: 118rpx;
			height: 57rpx;
			line-height: 57rpx;
			font-size: 28rpx;
			text-align: center;
			font-weight: 400;
			color: #0E0E0F;
			background: #999999;
			border-radius: 10rpx;
		}

		&_btn3 {
			width: 118rpx;
			height: 57rpx;
			line-height: 53rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			border-radius: 10rpx;
			border: 2rpx solid #999999;
		}

		&_popup {
			width: 100%;
			background: #292B2C;

			&_head {
				width: 100%;
				height: 107rpx;
				background: #404243;
				padding: 29rpx 25rpx 25rpx;
				white-space: nowrap;
				overflow-x: auto;
			}

			&_tab {
				// width: 145rpx;
				height: 52rpx;
				line-height: calc(52rpx - 2px);
				text-align: center;
				font-size: 30rpx;
				display: inline-flex;
				color: #FFFFFF;
				border-radius: 26rpx;
				border: 1px solid #FFFFFF;
				vertical-align: top;
				padding: 0 20rpx;
			}

			&_tab+&_tab {
				margin-left: 18rpx;
			}

			&_tab.active {

				height: 52rpx;
				background: rgba(246, 204, 25, 0.2);
				border-radius: 26rpx;
				border: 1px solid #FFCF00;
				font-size: 30rpx;
				color: #FFCF00;
				padding: 0 20rpx;
			}

			&_scroll {
				width: 100%;
				height: 828rpx;
			}

			&_left {
				height: 828rpx;
				width: 280rpx;
				border-right: 1px solid #666666;
				background: #2F3032;
				padding-bottom: 1px;
			}

			&_right {
				height: 828rpx;
				background: #292B2C;
				padding-left: 28rpx;
			}


		}

		.arrow {
			width: 15rpx;
			height: 8rpx;
			margin-left: 10rpx;
		}

		&_left_item:last-child {
			padding-bottom: 20rpx;
			height: 100rpx;
		}

		&_left_item {
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 35rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
			position: relative;
			margin-top: 24rpx;

			&.active {
				font-size: 30rpx;
				font-weight: 500;
				color: #FFCF00;
			}

			&.active::before {
				content: '';
				border-radius: 0rpx 100rpx 100rpx 0rpx;
				background: #FFCF00;
				position: absolute;
				top: 0;
				left: 0;
				width: 5rpx;
				height: 80rpx;
			}
		}

		&_right_item:first-child {
			margin-top: 30rpx;
		}

		&_right_item {
			width: 80%;
			height: 80rpx;
			line-height: calc(80rpx - 2px);
			text-align: center;
			border-radius: 15rpx;
			border: 1px solid #999999;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 20rpx;

			&.active {
				font-size: 30rpx;
				font-weight: 400;
				color: #FFCF00;
				background: rgba(246, 204, 25, 0.2);
				box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
				border: 1px solid #FFCF00;
			}
		}

		&_btn_reset {
			width: 230rpx;
			height: 90rpx;
			line-height: calc(90rpx - 2px);
			border-radius: 20rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
			border: 1px solid #979797;
		}

		&_btn_sure {
			width: 430rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #0E0E0F;
			text-align: center;
			background: #FFCF00;
			border-radius: 20rpx;
			margin-left: 30rpx;
		}

		&_time_nav {
			padding-top: 24rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			padding-bottom: 10rpx;
		}

		&_time_link {
			width: 300rpx;
			height: 80rpx;
			line-height: calc(80rpx - 2px);
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #999999;
			border-radius: 15rpx;
			border: 1px solid #666666;
		}

		&_sq {
			width: 29rpx;
			height: 1px;
			background: #EEEEEE;
			border-radius: 45rpx;
			margin-left: 35rpx;
			margin-right: 35rpx;
		}

		&_time_scroll {
			height: 710rpx;
			padding: 0 25rpx 20rpx;

			&_item {
				width: 700rpx;
				height: 80rpx;
				line-height: calc(80rpx - 2px);
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				border-radius: 15rpx;
				border: 1px solid #666666;
				margin-top: 20rpx;
			}

			&_item.active {
				background: rgba(246, 204, 25, 0.2);
				box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
				border: 1rpx solid #FFCF00;
				color: #FFCF00;
			}
		}

		&_box1 {
			width: 700rpx;
			background: #404243;
			border-radius: 20rpx;
			padding: 0 20rpx;

			&_item {
				padding-top: 20rpx;
				padding-bottom: 20rpx;

			}

			&_item+&_item {
				border-top: 1px solid #666;
			}

			&_cover {
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				display: block;
			}
		}

		&_info_item {
			width: 700rpx;
			padding: 20rpx;
			background: #404243;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			&_cover {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				display: block;
			}
		}

		&_tips {
			display: inline-block;
			height: 39rpx;
			line-height: 39rpx;
			background: linear-gradient(90deg, #FFD26A 0%, #FFB94E 100%);
			border-radius: 19rpx;
			padding: 0 15rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #000000;
			margin-left: 20rpx;
		}
	}
</style>